<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./animate.css">
</head>
<body>
    <h1 class="my-element sss ddd fff"> hellow world!  </h1>



    <section class="animation-list animate__animated animate__fadeInRight">
        <button class="callout-hideList button" _msthash="1008189" _msttexthash="137852" _msthidden="1">Close list</button>
        
      <section class="attention_seekers" id="attention_seekers">
        <h3 class="animation-title" _msthash="471263" _msttexthash="22680190">寻求注意力的人</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="bounce">
      <span class="animation-item--title" _msthash="951132" _msttexthash="4487431">反弹</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1443221" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="flash">
      <span class="animation-item--title" _msthash="951561" _msttexthash="5656534">闪光</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1443650" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="pulse">
      <span class="animation-item--title" _msthash="951990" _msttexthash="5181059">脉冲</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1444079" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="rubberBand">
      <span class="animation-item--title" _msthash="952419" _msttexthash="8731593">橡胶带</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1444508" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="shakeX">
      <span class="animation-item--title" _msthash="952848" _msttexthash="4550741">摇动 x</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1444937" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="shakeY">
      <span class="animation-item--title" _msthash="953277" _msttexthash="4872179">沙基</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1445366" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="headShake">
      <span class="animation-item--title" _msthash="953706" _msttexthash="4747860">头摇</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1445795" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="swing">
      <span class="animation-item--title" _msthash="954135" _msttexthash="4536610">摆动</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1446224" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="tada">
      <span class="animation-item--title" _msthash="954564" _msttexthash="5884684">塔达</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1446653" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="wobble">
      <span class="animation-item--title" _msthash="980447" _msttexthash="4497298">抖动</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1483690" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="jello">
      <span class="animation-item--title" _msthash="980889" _msttexthash="4589676">果冻</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1484132" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="heartBeat">
      <span class="animation-item--title" _msthash="981331" _msttexthash="6010121">心跳</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1484574" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="back_entrances" id="back_entrances">
        <h3 class="animation-title" _msthash="359164" _msttexthash="6637761">后入口</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="backInDown">
      <span class="animation-item--title" _msthash="796289" _msttexthash="4211818">回到</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1254916" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="backInLeft">
      <span class="animation-item--title" _msthash="796679" _msttexthash="4259034">回叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1255306" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="backInRight">
      <span class="animation-item--title" _msthash="797069" _msttexthash="7679035">背光右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1255696" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="backInUp">
      <span class="animation-item--title" _msthash="797459" _msttexthash="4176965">备份</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1256086" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="back_exits" id="back_exits">
        <h3 class="animation-title" _msthash="242775" _msttexthash="6653257">后出口</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="backOutDown">
      <span class="animation-item--title" _msthash="622908" _msttexthash="11606062">备份关闭</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1036919" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="backOutLeft">
      <span class="animation-item--title" _msthash="623246" _msttexthash="8301540">回输出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1037257" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="backOutRight">
      <span class="animation-item--title" _msthash="623584" _msttexthash="8177819">返回右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1037595" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="backOutUp">
      <span class="animation-item--title" _msthash="623922" _msttexthash="4176965">备份</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1037933" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="bouncing_entrances" id="bouncing_entrances">
        <h3 class="animation-title" _msthash="503893" _msttexthash="11227242">弹跳入口</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="bounceIn">
      <span class="animation-item--title" _msthash="998010" _msttexthash="5997563">弹跳</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1501253" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceInDown">
      <span class="animation-item--title" _msthash="998452" _msttexthash="11776076">弹跳下来</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1501695" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceInLeft">
      <span class="animation-item--title" _msthash="998894" _msttexthash="8512361">弹跳叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1502137" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceInRight">
      <span class="animation-item--title" _msthash="999336" _msttexthash="7001878">反弹右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1502579" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceInUp">
      <span class="animation-item--title" _msthash="999778" _msttexthash="5997563">弹跳</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1503021" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="bouncing_exits" id="bouncing_exits">
        <h3 class="animation-title" _msthash="366392" _msttexthash="11244675">弹跳出口</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="bounceOut">
      <span class="animation-item--title" _msthash="803517" _msttexthash="4487431">反弹</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1262144" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceOutDown">
      <span class="animation-item--title" _msthash="803907" _msttexthash="13426660">弹跳关闭</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1262534" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceOutLeft">
      <span class="animation-item--title" _msthash="804297" _msttexthash="13026078">弹跳输出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1262924" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceOutRight">
      <span class="animation-item--title" _msthash="804687" _msttexthash="7001878">反弹右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1263314" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="bounceOutUp">
      <span class="animation-item--title" _msthash="805077" _msttexthash="4487431">反弹</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1263704" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="fading_entrances" id="fading_entrances">
        <h3 class="animation-title" _msthash="427635" _msttexthash="11898029">褪色入口</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="fadeIn">
      <span class="animation-item--title" _msthash="893256" _msttexthash="6668350">褪色</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1374191" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInDown">
      <span class="animation-item--title" _msthash="893672" _msttexthash="10746060">淡入淡出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1374607" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInDownBig">
      <span class="animation-item--title" _msthash="894088" _msttexthash="11115468">法林当大</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1375023" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInLeft">
      <span class="animation-item--title" _msthash="894504" _msttexthash="16395873">法林莱夫特</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1375439" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInLeftBig">
      <span class="animation-item--title" _msthash="894920" _msttexthash="19956261">法林莱夫特大</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1375855" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInRight">
      <span class="animation-item--title" _msthash="895336" _msttexthash="17080661">法德林赖特</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1376271" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInRightBig">
      <span class="animation-item--title" _msthash="895752" _msttexthash="25896481">法德林赖特比格</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1376687" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInUp">
      <span class="animation-item--title" _msthash="896168" _msttexthash="6668350">褪色</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1377103" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInUpBig">
      <span class="animation-item--title" _msthash="896584" _msttexthash="19204679">法德因普比格</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1377519" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInTopLeft">
      <span class="animation-item--title" _msthash="921947" _msttexthash="10746060">淡入淡出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1414036" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInTopRight">
      <span class="animation-item--title" _msthash="922376" _msttexthash="22768408">褪色托普赖特</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1414465" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInBottomLeft">
      <span class="animation-item--title" _msthash="922805" _msttexthash="17177966">法德因伯德叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1414894" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeInBottomRight">
      <span class="animation-item--title" _msthash="923234" _msttexthash="25879022">法德因 · 伯德赖特</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1415323" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="fading_exits" id="fading_exits">
        <h3 class="animation-title" _msthash="300690" _msttexthash="17097158">淡入淡出出口</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="fadeOut">
      <span class="animation-item--title" _msthash="709319" _msttexthash="4742283">淡出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1145638" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutDown">
      <span class="animation-item--title" _msthash="709683" _msttexthash="10746060">淡入淡出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1146002" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutDownBig">
      <span class="animation-item--title" _msthash="710047" _msttexthash="7412574">淡出大</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1146366" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutLeft">
      <span class="animation-item--title" _msthash="710411" _msttexthash="7257081">淡出叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1146730" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutLeftBig">
      <span class="animation-item--title" _msthash="710775" _msttexthash="10224071">淡出叶大</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1147094" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutRight">
      <span class="animation-item--title" _msthash="711139" _msttexthash="7256730">淡出右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1147458" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutRightBig">
      <span class="animation-item--title" _msthash="711503" _msttexthash="10223720">淡出右大</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1147822" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutUp">
      <span class="animation-item--title" _msthash="711867" _msttexthash="4742283">淡出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1148186" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutUpBig">
      <span class="animation-item--title" _msthash="712231" _msttexthash="7412574">淡出大</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1148550" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutTopLeft">
      <span class="animation-item--title" _msthash="735514" _msttexthash="22711689">淡出顶部部分</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1182987" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutTopRight">
      <span class="animation-item--title" _msthash="735891" _msttexthash="17204486">淡出顶部右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1183364" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutBottomRight">
      <span class="animation-item--title" _msthash="736268" _msttexthash="15470897">淡出底部右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1183741" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="fadeOutBottomLeft">
      <span class="animation-item--title" _msthash="736645" _msttexthash="15471326">淡出底部叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1184118" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="flippers" id="flippers">
        <h3 class="animation-title" _msthash="193388" _msttexthash="10559705">鳍 状 肢</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="flip">
      <span class="animation-item--title" _msthash="545025" _msttexthash="6799897">翻转</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="936728" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="flipInX">
      <span class="animation-item--title" _msthash="545337" _msttexthash="6799897">翻转</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="937040" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="flipInY">
      <span class="animation-item--title" _msthash="545649" _msttexthash="6799897">翻转</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="937352" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="flipOutX">
      <span class="animation-item--title" _msthash="545961" _msttexthash="6813937">翻转 x</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="937664" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="flipOutY">
      <span class="animation-item--title" _msthash="546273" _msttexthash="6799897">翻转</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="937976" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="lightspeed" id="lightspeed">
        <h3 class="animation-title" _msthash="241657" _msttexthash="5730699">光速</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="lightSpeedInRight">
      <span class="animation-item--title" _msthash="621790" _msttexthash="11359439">光速度右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1035801" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="lightSpeedInLeft">
      <span class="animation-item--title" _msthash="622128" _msttexthash="8245497">光速叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1036139" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="lightSpeedOutRight">
      <span class="animation-item--title" _msthash="622466" _msttexthash="15832427">光速输出右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1036477" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="lightSpeedOutLeft">
      <span class="animation-item--title" _msthash="622804" _msttexthash="12759214">光速输出</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1036815" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

      <section class="rotating_entrances" id="rotating_entrances">
        <h3 class="animation-title" _msthash="505973" _msttexthash="11419512">旋转入口</h3>
        <ul class="animation-group">
    <li class="animation-item" data-animation="rotateIn">
      <span class="animation-item--title" _msthash="1000090" _msttexthash="6189833">旋转</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1503333" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="rotateInDownLeft">
      <span class="animation-item--title" _msthash="1000532" _msttexthash="11321596">旋转下叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1503775" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="rotateInDownRight">
      <span class="animation-item--title" _msthash="1000974" _msttexthash="14378273">旋转向下右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1504217" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="rotateInUpLeft">
      <span class="animation-item--title" _msthash="1001416" _msttexthash="17807985">旋转在向上叶</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1504659" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li>

    <li class="animation-item" data-animation="rotateInUpRight">
      <span class="animation-item--title" _msthash="1001858" _msttexthash="8704280">旋转右</span>
      <button class="copy-icon" type="button">
        <span class="tooltip" _msthash="1505101" _msttexthash="38532078">将类名称复制到剪贴板</span>
      </button>
    </li></ul>
      </section>
    

    <section class="rotating_exits" id="rotating_exits">
        <h3 class="animation-title" _msthash="368472" _msttexthash="11436945">旋转出口</h3>
        <ul class="animation-group">
            <li class="animation-item" data-animation="rotateOut">
                <span class="animation-item--title" _msthash="805597" _msttexthash="13218348">旋转输出</span>
                <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1264224" _msttexthash="38532078">将类名称复制到剪贴板</span>
                </button>
            </li>

            <li class="animation-item" data-animation="rotateOutDownLeft">
                <span class="animation-item--title" _msthash="805987" _msttexthash="19834841">旋转向下输出</span>
                <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1264614" _msttexthash="38532078">将类名称复制到剪贴板</span>
                </button>
            </li>

            <li class="animation-item" data-animation="rotateOutDownRight">
                <span class="animation-item--title" _msthash="806377" _msttexthash="14378273">旋转向下右</span>
                <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1265004" _msttexthash="38532078">将类名称复制到剪贴板</span>
                </button>
            </li>

            <li class="animation-item" data-animation="rotateOutUpLeft">
                <span class="animation-item--title" _msthash="806767" _msttexthash="13218348">旋转输出</span>
                <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1265394" _msttexthash="38532078">将类名称复制到剪贴板</span>
                </button>
            </li>

            <li class="animation-item" data-animation="rotateOutUpRight">
                <span class="animation-item--title" _msthash="807157" _msttexthash="16291561">旋转输出右</span>
                <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1265784" _msttexthash="38532078">将类名称复制到剪贴板</span>
                </button>
            </li>
        </ul>
    </section>
    

        <section class="specials" id="specials">
            <h3 class="animation-title" _msthash="190190" _msttexthash="4769115">特价</h3>
            <ul class="animation-group">
                <li class="animation-item" data-animation="hinge">
                    <span class="animation-item--title" _msthash="541827" _msttexthash="7436416">铰链</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="933530" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="jackInTheBox">
                    <span class="animation-item--title" _msthash="542139" _msttexthash="15335528">杰克因特盒</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="933842" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="rollIn">
                    <span class="animation-item--title" _msthash="542451" _msttexthash="5724485">罗林</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="934154" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="rollOut">
                    <span class="animation-item--title" _msthash="542763" _msttexthash="4504136">推出</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="934466" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>
            </ul>
        </section>
    

        <section class="zooming_entrances" id="zooming_entrances">
            <h3 class="animation-title" _msthash="468728" _msttexthash="10887474">缩放入口</h3>
            <ul class="animation-group">
                <li class="animation-item" data-animation="zoomIn">
                    <span class="animation-item--title" _msthash="948597" _msttexthash="5657795">缩放</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1440686" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomInDown">
                    <span class="animation-item--title" _msthash="949026" _msttexthash="76484278">放大缩小字体功能 放大缩小字体功能</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1441115" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomInLeft">
                    <span class="animation-item--title" _msthash="949455" _msttexthash="8328138">缩放在Left</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1441544" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomInRight">
                    <span class="animation-item--title" _msthash="949884" _msttexthash="8172242">缩放右</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1441973" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomInUp">
                    <span class="animation-item--title" _msthash="950313" _msttexthash="5657795">缩放</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1442402" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>
            </ul>
        </section>
    
        <section class="zooming_exits" id="zooming_exits">
            <h3 class="animation-title" _msthash="336505" _msttexthash="10904907">缩放出口</h3>
            <ul class="animation-group">
                <li class="animation-item" data-animation="zoomOut">
                    <span class="animation-item--title" _msthash="759382" _msttexthash="76484278">放大缩小字体功能 放大缩小字体功能</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1206855" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomOutDown">
                    <span class="animation-item--title" _msthash="759759" _msttexthash="76484278">放大缩小字体功能 放大缩小字体功能</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1207232" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomOutLeft">
                    <span class="animation-item--title" _msthash="760136" _msttexthash="11760645">放大输出</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1207609" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomOutRight">
                    <span class="animation-item--title" _msthash="760513" _msttexthash="76484278">放大缩小字体功能 放大缩小字体功能</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1207986" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="zoomOutUp">
                    <span class="animation-item--title" _msthash="760890" _msttexthash="4732130">放大</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1208363" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>
            </ul>
        </section>
    

        <section class="sliding_entrances" id="sliding_entrances">
            <h3 class="animation-title" _msthash="465907" _msttexthash="10011898">滑动入口</h3>
            <ul class="animation-group">
                <li class="animation-item" data-animation="slideInDown">
                    <span class="animation-item--title" _msthash="945776" _msttexthash="9897446">滑动向下</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1437865" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="slideInLeft">
                    <span class="animation-item--title" _msthash="946205" _msttexthash="11411504">幻灯片叶</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1438294" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="slideInRight">
                    <span class="animation-item--title" _msthash="946634" _msttexthash="11411114">幻灯片右</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1438723" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="slideInUp">
                    <span class="animation-item--title" _msthash="947063" _msttexthash="8617284">幻灯片</span>
                    <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1439152" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>
            </ul>
        </section>
    

        <section class="sliding_exits" id="sliding_exits">
            <h3 class="animation-title" _msthash="333684" _msttexthash="10029331">滑动出口</h3>
            <ul class="animation-group">
                <li class="animation-item" data-animation="slideOutDown">
                    <span class="animation-item--title" _msthash="756561" _msttexthash="4764123">滑出</span>
                    <button class="copy-icon" type="button">
                        <span class="tooltip" _msthash="1204034" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="slideOutLeft">
                    <span class="animation-item--title" _msthash="756938" _msttexthash="11834095">滑出部分</span>
                    <button class="copy-icon" type="button">
                        <span class="tooltip" _msthash="1204411" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="slideOutRight">
                    <span class="animation-item--title" _msthash="757315" _msttexthash="7278570">滑出右</span>
                    <button class="copy-icon" type="button">
                        <span class="tooltip" _msthash="1204788" _msttexthash="38532078">将类名称复制到剪贴板</span>
                    </button>
                </li>

                <li class="animation-item" data-animation="slideOutUp">
                <span class="animation-item--title" _msthash="757692" _msttexthash="4782219">滑动</span>
                <button class="copy-icon" type="button">
                    <span class="tooltip" _msthash="1205165" _msttexthash="38532078">将类名称复制到剪贴板</span>
                </button>
                </li>
            </ul>
        </section>
    </section>
</body>
<script>
    const animateCSS = (element, animation, prefix = 'animate__') =>
    // We create a Promise and return it
    new Promise((resolve, reject) => {
        const animationName = `${prefix}${animation}`;
        const node = document.querySelector(element);

        node.classList.add(`${prefix}animated`, animationName);

        console.log(node.classList.add());

        // When the animation ends, we clean the classes and resolve the Promise
        function handleAnimationEnd() {
            node.classList.remove(`${prefix}animated`, animationName);
            node.removeEventListener('animationend', handleAnimationEnd);

            resolve('Animation ended');
        }

        node.addEventListener('animationend', handleAnimationEnd);
    });
    animateCSS('.my-element', 'bounce')
</script>
</html>